<template>
  <div>
    <el-drawer v-model="isClose" title="I am the title" :with-header="false">
      <div><span>工具栏</span></div>
      <div class="toolbox" v-show="isClose">
        <el-form-item label="添加任务:">
          <el-button class="btn" type="primary" @click="addTask"
            >添加任务</el-button
          >
        </el-form-item>
        <el-form-item label="删除任务:"
          ><el-button class="btn" type="danger" @click="deleteTask" plain
            >删除任务</el-button
          >
        </el-form-item>
        <el-form-item label="修改展示层级 :">
          <el-select
            v-model="value1"
            class="m-2 btn"
            placeholder="选择展示层级"
            v-on:change="updateGraph"
          >
            <el-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="修改时间刻度 :">
          <el-select
            v-model="value2"
            class="m-2 btn"
            placeholder="选择时间刻度"
            v-on:change="zoomChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <AddModel :submit="addSubmit" />
        <DeleteModel :submit="deleteSubmit" />
      </div>
    </el-drawer>
    <div class="show_fun_arrow" @click="isClose = !isClose"></div>
  </div>
</template>
<script>
import { store } from "../store.js";
import Model from "./Model.vue";
import AddModel from "./AddModel.vue";
import DeleteModel from "./DeleteModel.vue";
import { url, date } from "@/utils/global.js";
import { ref } from "vue";
import { addmethod, deleteData } from "@/controller/api.js";
import GSTC from "gantt-schedule-timeline-calendar/dist/gstc.wasm.esm.min.js";
import {
  generate,
  getRootData,
  getLevelData2,
  getLevelData1,
  getLevelData4,
  getLevelData5,
  getLevelData6,
} from "@/controller/api.js";
const value1 = ref("展示三层级");
const value2 = ref("days");
const options = [
  {
    value: "days",
    label: "days",
  },
  {
    value: "weeks",
    label: "weeks",
  },
  {
    value: "months",
    label: "months",
  },
];
const levels = [
  {
    value: "展示一层级",
    label: "展示一层级",
  },
  {
    value: "展示二层级",
    label: "展示二层级",
  },
  {
    value: "展示三层级",
    label: "展示三层级",
  },
  {
    value: "展示四层级",
    label: "展示四层级",
  },
  {
    value: "展示五层级",
    label: "展示五层级",
  },
  {
    value: "展示六层级",
    label: "展示六层级",
  },
];
export default {
  name: "ToolBox",
  components: {
    Model: Model,
    AddModel: AddModel,
    DeleteModel: DeleteModel,
  },
  data() {
    return {
      store,
      isClose: false,
      options,
      value1,
      value2,
      levels,
    };
  },
  setup() {
    function addTask() {
      store.addModel = true;
    }
    function deleteTask() {
      store.deleteModel = true;
    }
    const addSubmit = async () => {
      let addData = {
        allday: 0,
        code: "",
        dataend: "",
        datastart: "",
        id: 0,
        keypath: "",
        milestone: "",
        name: "",
        needday: 0,
        originalcode: "",
        parent: 0,
        parentId: 0,
        remark: "",
        responsible: "",
        selfId: 0,
      };
      addData.name = store.rowData.task;
      addData.datastart = date(store.rowData.startTime).format("YYYY-MM-DD");
      addData.dataend = date(store.rowData.endTime).format("YYYY-MM-DD");
      addData.allday = store.rowData.taskTime;
      addData.code = store.rowData.code;
      addData.parent = parseInt(store.rowData.parent);
      addmethod(addData);
      store.addModel = false;
      location.reload();
    };
    const deleteSubmit = async () => {
      let data = {};
      data.id = parseInt(store.rowData.id);
      deleteData(data);
      store.deleteModel = false;
      location.reload();
    };
    const zoomChange = (value) => {
      console.log(value);
      const period = value;
      let zoom = 20;
      let from = globalThis.gstc.api.time
        .date("2021-6-1")
        .startOf("day")
        .valueOf();
      let to = globalThis.gstc.api.time
        .date("2023-12-01")
        .endOf("month")
        .valueOf();
      switch (period) {
        case "weeks":
          zoom = 24;
          // from = gstc.api.time.date("2020-02-01").startOf("day").valueOf();
          // to = gstc.api.time.date("2020-03-01").endOf("month").valueOf();
          state.update("config.chart.items", (old) => {
            for (let i in old) {
              old[i].time.end = old[i].time.start + 7 * 3600 * 24 * 1000;
            }
            return old;
          });
          break;
        case "days":
          zoom = 20;
          state.update("config.chart.items", (old) => {
            for (let i in old) {
              old[i].time.end = old[i].time.start + 0.5 * 3600 * 24 * 1000;
            }
            return old;
          });
          break;
        case "months":
          zoom = 26;
          // from = gstc.api.time.date("2018-01-01").startOf("day").valueOf();
          // to = gstc.api.time.date("2021-01-10").endOf("year").valueOf();
          state.update("config.chart.items", (old) => {
            for (let i in old) {
              old[i].time.end = old[i].time.start + 30 * 3600 * 24 * 1000;
            }
            return old;
          });
          break;
      }
      console.log(zoom);
      state.update("config.chart.time", (time) => {
        console.log(time);
        time.zoom = zoom;
        time.from = from;
        time.to = to;
        return time;
      });
    };
    const updateGraph = async (value) => {
      value2.value = "days";
      let rows, items, res;
      switch (value) {
        case "展示一层级":
          res = await getLevelData1();
          rows = res.rows;
          items = res.items;
          break;
        case "展示二层级":
          res = await getLevelData2();
          rows = res.rows;
          items = res.items;
          break;
        case "展示三层级":
          res = await getRootData();
          rows = res.rows;
          items = res.items;
          break;
        case "展示四层级":
          res = await getLevelData4();
          rows = res.rows;
          items = res.items;
          break;
        case "展示五层级":
          res = await getLevelData5();
          rows = res.rows;
          items = res.items;
          break;
        case "展示六层级":
          res = await getLevelData6();
          rows = res.rows;
          items = res.items;
          break;
      }
      if (globalThis.gstc) {
        console.log("des");
        globalThis.gstc.destroy();
      }
      let gstc = globalThis.gstc;
      let state = globalThis.state;
      let config = globalThis.config;

      let div = document.createElement("div");
      div.className = "gstc-wrapper";
      document.body.appendChild(div);

      config.list.rows = rows;
      config.chart.items = items;
      state = GSTC.api.stateFromConfig(config);
      globalThis.state = state;
      globalThis.config = config;
      gstc = GSTC({
        element: div,
        state,
      });
      globalThis.gstc = gstc;
    };
    return {
      addTask,
      deleteTask,
      addSubmit,
      deleteSubmit,
      zoomChange,
      updateGraph,
    };
  },
};
</script>
<style>
.btn {
  font-size: medium;
}
.toolbox {
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  background-color: white;
  justify-content: center;
  align-items: flex-start;
}
.show_fun_arrow {
  z-index: 999;
  display: inline-block;
  height: 30px;
  width: 5%;
  background-color: rgba(119, 119, 119, 0.214);
  box-shadow: 1px 1px 1px #777;
  position: absolute;
  left: 95%;
  border-radius: 0 0 20px 20px;
}
</style>
